<template>
  <div>
    <div class="countDown">
      <count-down :endTimer="hdActivity.end"></count-down>
    </div>
    <section>
      <header>票数排行榜</header>
      <ul class="pollRank">
        <li v-for="(item,index) in playerList" :key="index">
          <img :src="item.coverImg" alt />
          <p>{{item.name}}</p>
          <p>{{item.ticket}}票</p>
        </li>
      </ul>
      <ul class="pollRankList">
        <li v-for="(item,index) in playerList1" :index="idnex" :key="index">
          <div>
            <img :src="item.coverImg" alt />
            <div>
              <p>{{item.name}}</p>
              <p>{{item.ticket}}票</p>
            </div>
          </div>
          <p>{{index+4}}</p>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import countDown from "@/components/countDown.vue";
export default {
  data() {
    return {
      hdActivity: "",
      playerList: "",
      playerList1: "",
      pollData: [
        {
          name: "李秀满的ATM",
          poll: 456789,
          photo:
            "http://r.photo.store.qq.com/psc?/V12xBNEP0wyzrG/S5z.*ov051w3o7gBaJERRtuWfTYME3reLV*fYfa35E535u7tUS2hC8DFQxfHMrqv8odNAdQPp*tzEF3c.kwkjytCB9kmK00CgIR26E0cmh4!/r"
        },
        {
          name: "富川一枝花",
          poll: 456789,
          photo:
            "http://r.photo.store.qq.com/psc?/V12xBNEP0wyzrG/S5z.*ov051w3o7gBaJERRtuWfTYME3reLV*fYfa35E535u7tUS2hC8DFQxfHMrqv8odNAdQPp*tzEF3c.kwkjytCB9kmK00CgIR26E0cmh4!/r"
        },
        {
          name: "shxxbi131",
          poll: 456789,
          photo:
            "http://r.photo.store.qq.com/psc?/V12xBNEP0wyzrG/S5z.*ov051w3o7gBaJERRtuWfTYME3reLV*fYfa35E535u7tUS2hC8DFQxfHMrqv8odNAdQPp*tzEF3c.kwkjytCB9kmK00CgIR26E0cmh4!/r"
        },
        {
          name: "大虞海棠",
          poll: 456789,
          photo:
            "http://r.photo.store.qq.com/psc?/V12xBNEP0wyzrG/S5z.*ov051w3o7gBaJERRtuWfTYME3reLV*fYfa35E535u7tUS2hC8DFQxfHMrqv8odNAdQPp*tzEF3c.kwkjytCB9kmK00CgIR26E0cmh4!/r"
        },
        {
          name: "欣风雪虞",
          poll: 456789,
          photo:
            "http://r.photo.store.qq.com/psc?/V12xBNEP0wyzrG/S5z.*ov051w3o7gBaJERRtuWfTYME3reLV*fYfa35E535u7tUS2hC8DFQxfHMrqv8odNAdQPp*tzEF3c.kwkjytCB9kmK00CgIR26E0cmh4!/r"
        },
        {
          name: "冰棠雪梨",
          poll: 456789,
          photo:
            "http://r.photo.store.qq.com/psc?/V12xBNEP0wyzrG/S5z.*ov051w3o7gBaJERRtuWfTYME3reLV*fYfa35E535u7tUS2hC8DFQxfHMrqv8odNAdQPp*tzEF3c.kwkjytCB9kmK00CgIR26E0cmh4!/r"
        }
      ]
    };
  },
  components: {
    countDown
  },
  computed: {},
  methods: {
    getRankData() {
      this.$fly.post("/playerRank", { activityId: 1 }).then(res => {
        this.hdActivity = res.data.data.hdActivity;
        this.playerList = res.data.data.playerList;
        this.playerList[1] = [
          this.playerList[0],
          (this.playerList[0] = this.playerList[1])
        ][0];
        this.playerList1 = res.data.data.playerList1;
      });
    }
  },
  created() {},
  onLoad() {
    this.getRankData();
  }
};
</script>
<style>
page {
  background-color: #f8f9f9;
}
</style>
<style scoped>
.countDown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  font-size: 16px;
  color: SLATEGRAY;
}
section {
  font-size: 17px;
  margin: 0 10px;
  color: #a6acaf;
}
section header {
  background-color: NAVAJOWHITE;
  text-align: center;
  padding: 10px;
  color: white;
}
.pollRank {
  background-color: #fff;
  border-bottom: 1px solid #ecf0f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  color: SLATEGRAY;
}
.pollRank li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 130px;
  font-size: 17px;
}
.pollRank li p:nth-child(3) {
  color: NAVAJOWHITE;
}
.pollRank li img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}
.pollRank li:nth-child(2) {
  font-weight: 700;
  margin-top: -15px;
}
.pollRank li:nth-child(2) img {
  margin-top: -10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.pollRankList {
  color: SLATEGRAY;
  background-color: #fff;
}
.pollRankList li {
  border-bottom: 1px solid #ecf0f1;
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  padding: 0 20px;
}
.pollRankList li div {
  display: flex;
}
.pollRankList li div div {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pollRankList li div div p:nth-child(2) {
  font-size: 12px;
}
.pollRankList li img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
</style>
